<template>
  <div>
    <el-row class="utils">
      <el-col :span="24" align="right">
        <el-button v-if="!title.includes('详情')" type="primary" @click="handleAdd()"
          >添加计划</el-button
        >
      </el-col>
    </el-row>
    <el-table :data="store.state.projectCenter.contractForm.contractPlanList" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="nodeName" label="进度节点" width="100" />
      <el-table-column prop="planStartPeriod" label="计划周期" width="150">
        <template #default="{ row }">
          {{ row.planStartPeriod?.slice(0, 10) + '-' + row.planEndPeriod?.slice(0, 10) }}
        </template>
      </el-table-column>
      <el-table-column prop="planContent" label="计划内容" />
      <el-table-column prop="assessmentTarget" label="考核目标" />
      <el-table-column prop="assessmentIndex" label="考核指标">
        <template #default="{ row }">
          {{ row.authorizedPatent ? `授权专利${row.authorizedPatent}个; ` : '' }}
          {{ row.authorizedSoftworks ? `授权软著${row.authorizedSoftworks}个; ` : '' }}
          {{ row.schoolWorks ? `学校著作${row.schoolWorks}个; ` : '' }}
          {{ row.academicPapers ? `学术论文${row.academicPapers}个; ` : '' }}
          {{ row.technologyAwards ? `科技奖项${row.technologyAwards}个; ` : '' }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" v-if="!title.includes('详情')">
        <template #default="scope">
          <el-button
            :disabled="!!scope.row.isConfirm"
            @click="handleEdit(scope)"
            class="ordinary"
            size="small"
            >编辑</el-button
          >
          <el-button
          :disabled="!!scope.row.isConfirm"
            @click="handleDel(scope.$index)"
            type="danger"
            size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="addDialog"
      append-to-body
      width="55%"
      top="10vh"
      :title="currentHandle"
      @close="handleClose"
      :show-close="false"
    >
      <el-form
        ref="scheduleForm"
        :model="form"
        label-position="left"
        label-width="100px"
        :rules="rules"
        class="demo-form-inline"
      >
        <el-form-item label="进度节点:" required prop="nodeName">
          <el-input
            maxlength="32"
            show-word-limit
            class="nodeName"
            v-model="form.nodeName"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="计划周期:" required prop="planPeriod">
          <el-date-picker
            v-model="form.planPeriod"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="计划内容:" required prop="planContent">
          <el-input
            maxlength="512"
            show-word-limit
            v-model="form.planContent"
            :rows="7"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="考核目标:" required prop="assessmentTarget">
          <el-input
            v-model="form.assessmentTarget"
            :rows="7"
            maxlength="512"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
        考核指标
        <hr />
        <el-form-item class="index" label="授权专利:">
          <el-input
            maxlength="3"
            type="text"
            @input="form.authorizedPatent = form.authorizedPatent.replace(/^(0+)|[^\d]+/g, '')"
            class="authorizedPatent"
            v-model="form.authorizedPatent"
          />&ensp;个
        </el-form-item>
        <el-form-item class="index" label="授权软著:">
          <el-input
            maxlength="3"
            type="text"
            @input="
              form.authorizedSoftworks = form.authorizedSoftworks.replace(/^(0+)|[^\d]+/g, '')
            "
            class="authorizedSoftworks"
            v-model="form.authorizedSoftworks"
          />&ensp;个
        </el-form-item>
        <el-form-item class="index" label="学校著作:">
          <el-input
            maxlength="3"
            type="text"
            @input="form.schoolWorks = form.schoolWorks.replace(/^(0+)|[^\d]+/g, '')"
            class="schoolWorks"
            v-model="form.schoolWorks"
          />&ensp;个
        </el-form-item>
        <el-form-item class="index" label="学术论文:">
          <el-input
            maxlength="3"
            type="text"
            @input="form.academicPapers = form.academicPapers.replace(/^(0+)|[^\d]+/g, '')"
            class="academicPapers"
            v-model="form.academicPapers"
          />&ensp;篇
        </el-form-item>
        <el-form-item class="index" label="科技奖项:">
          <el-input
            maxlength="3"
            type="text"
            @input="form.technologyAwards = form.technologyAwards.replace(/^(0+)|[^\d]+/g, '')"
            class="technologyAwards"
            v-model="form.technologyAwards"
          />&ensp;个
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialog = false">关闭</el-button>
          <el-button type="primary" @click="save()">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, watch, watchEffect } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    const store = useStore()
    let addDialog = ref(false)
    const rules = reactive({
      nodeName: { required: true, message: '该字段必填' },
      planPeriod: { required: true, message: '该字段必填' },
      planContent: { required: true, message: '该字段必填' },
      assessmentTarget: { required: true, message: '该字段必填' },
    })
    let form = reactive({
      nodeName: '', //进度节点
      planPeriod: [] as any, //计划周期
      planStartPeriod: '', //计划开始周期
      planEndPeriod: '', //计划结束周期
      planContent: '', //计划内容
      assessmentTarget: '', //考核目标
      assessmentIndex: '', //考核指标
      //考核指标依赖子表单
      authorizedPatent: '', //授权专利
      authorizedSoftworks: '', //授权软著
      schoolWorks: '', //学校著作
      academicPapers: '', //学术论文
      technologyAwards: '', //科技奖项
      isConfirm: false,
    })
    let currentHandle = ref('')
    let currentEdit = -1
    let indexArr = [] as any
    watchEffect(() => {
      indexArr = []
      if (form.authorizedPatent) indexArr.push(`授权专利${form.authorizedPatent}个; `)
      if (form.authorizedSoftworks) indexArr.push(`授权软著${form.authorizedSoftworks}个; `)
      if (form.schoolWorks) indexArr.push(`学校著作${form.schoolWorks}个; `)
      if (form.academicPapers) indexArr.push(`学术论文${form.academicPapers}篇; `)
      if (form.technologyAwards) indexArr.push(`科技奖项${form.technologyAwards}个; `)
      console.log('watchEffect配置的回调执行了', indexArr)
    })
    watch(
      () => form.planPeriod,
      () => {
        form.planStartPeriod = form.planPeriod[0]
        form.planEndPeriod = form.planPeriod[1]
        // delete form.planPeriod
        console.log('watch配置的回调执行了', form.planPeriod)
      }
    )
    const handleAdd = () => {
      currentHandle.value = '新增进度计划'
      addDialog.value = true
      for (let key in form) {
        form[key] = ''
      }
    }
    const handleEdit = (scope) => {
      currentEdit = scope.$index
      currentHandle.value = '编辑进度计划'
      for (let key in scope.row) {
        form[key] = scope.row[key]
      }
      form.planPeriod = [form.planStartPeriod, form.planEndPeriod]
      console.log(form, 'form')
      addDialog.value = true
    }
    const handleDel = (index) => {
      console.log(index)
      store.state.projectCenter.contractForm.contractPlanList.splice(index, 1)
    }
    //表单验证
    const scheduleForm = ref()
    const handleClose = () => {
      scheduleForm.value.resetFields()
      for (let key in form) {
        form[key] = ''
      }
    }
    const save = async () => {
      await scheduleForm.value.validate((valid, fields) => {
        if (valid) {
          let indexString = ''
          indexArr.forEach((element, index) => {
            indexString += `${index + 1}:${element} `
          })
          form.assessmentIndex = indexString
          console.log(form.assessmentIndex, 'form.assessmentIndex')
          console.log('submit!')
          if (currentHandle.value == '新增进度计划') {
            store.state.projectCenter.contractForm.contractPlanList.push({ ...form })
          } else if (currentHandle.value == '编辑进度计划') {
            store.state.projectCenter.contractForm.contractPlanList[currentEdit] = JSON.parse(
              JSON.stringify(form)
            )
          }
          scheduleForm.value.resetFields()
          addDialog.value = false
        } else {
          console.log('error submit!', fields)
        }
      })
    }
    return {
      addDialog,
      form,
      store,
      rules,
      currentHandle,
      scheduleForm,
      handleAdd,
      handleDel,
      handleEdit,
      handleClose,
      save,
    }
  },
  beforeUnmount() {
    console.log('进度执行表格卸载了')
    for (let key in this.form) {
      this.form[key] = ''
    }
  },
})
</script>

<style lang="scss" scoped>
.el-form {
  margin: 0 50px;
}
.nodeName {
  width: 35%;
}
.utils {
  margin: 10px 20px;
}
.index {
  width: 40%;
  height: 18px;
  line-height: 18px;
  .el-input {
    width: 100px;
  }
}
.demo-form-inline .el-form-item {
  width: 100%;
}
:deep(.el-dialog__body) {
  display: block;
  padding: 0 20px;
}
</style>
